<template>
	<div class="particulars">
		<Search />
		<div class="particulars_img">
			<img
				src="../../assets/image/my/my (5).png"
				alt=""
				class="particulars_img"
			/>
		</div>
		<div class="particulars_home">
			<div class="particulars_box_4">
				<div class="particulars_new_top">
					<div class="particulars_p_1">当前位置:福建人民出版社</div>
				</div>
				<div class="particulars_mian">
					<div class="particulars_mian_left">
						<img src="@/assets/image/book/6.png" alt="" />
						<img
							src="@/assets/image/book/1.png"
							alt=""
							class="particulars_img_1"
						/>
						<img
							src="@/assets/image/book/7.png"
							alt=""
							class="particulars_img_2"
						/>
					</div>
					<div class="particulars_mian_right">
						<p class="particulars_p_2">
							新时代 新风尚———福建省深入开展移风俗 "清风行动" 纪实
						</p>
						<div class="particulars_mian_right_one">
							<ul>
								<li>
									<p class="particulars_p_3">
										作者:中共福建省纪律检查委员会
										福建省监察委员会 福建省新闻出版社
									</p>
								</li>
								<li>
									<p class="particulars_p_4">
										出版单位:<span class="chuban"
											>福建人名出版社</span
										>
									</p>
								</li>
								<li>
									<p class="particulars_p_5">
										出版时间:2018年12月
									</p>
								</li>
								<li>
									<p class="particulars_p_6">
										<span>版次:1</span
										><span style="padding-left: 180px"
											>印次:1</span
										>
									</p>
								</li>
								<li>
									<p class="particulars_p_6">
										<span>字数:101</span
										><span style="padding-left: 160px"
											>码数:</span
										>
									</p>
								</li>
								<li>
									<p class="particulars_p_6">
										<span>纸张:</span
										><span style="padding-left: 188px"
											>开本:16</span
										>
									</p>
								</li>
								<li>
									<p class="particulars_p_6">
										<span>ISBN:978-7-211-07985-5</span
										><span style="padding-left: 32px"
											>装帧:</span
										>
									</p>
								</li>
							</ul>
						</div>

						<span class="particulars_mian_span_1"
							>定价:28.00元</span
						>
						<div class="particulars_mian_span_2">
							<img
								src="@/assets/image/home/home (11).png"
							/>加入购物车
						</div>
					</div>
					<div>
						<img
							src="@/assets/image/book/10.png"
							alt=""
							class="dinwgei_img_3"
						/>
					</div>
					<div>
						<img
							src="@/assets/image/book/11.png"
							alt=""
							class="dinwgei_img_4"
						/>
					</div>
				</div>
				<div>
					<el-tabs
						type="border-card"
						:header-cell-style="{
							background: '#950006'
						}"
					>
						<el-tab-pane label="作者简介">
							<div class="particulars_tab">
								<div class="particulars_tab_top">
									<p
										style="
											padding-top: 10px;

											color: #0b0b0b;

											font-weight: 600;
										"
									>
										2017年以来,在移风易俗的实践中,
									</p>
									<p
										style="
											padding-top: 10px;

											color: #0b0b0b;

											font-weight: 600;
										"
									>
										福建各级纪检监察机关积极作为 举猎有力,
									</p>
									<p
										style="
											padding-top: 10px;

											color: #0b0b0b;

											font-weight: 600;
										"
									>
										取得了较好的成效,积累了宝贵的经验。
									</p>
									<p
										style="
											padding-top: 60px;

											color: #0b0b0b;

											font-weight: 600;
										"
									>
										本书收入其中最富贵新型示范性者,
									</p>
									<p
										style="
											margin-top: 90px;

											padding-top: 10px;

											color: #0b0b0b;

											font-weight: 600;
										"
									>
										的撒大苏打阿斯顿撒的撒大苏打啊实打实大苏打市多啊实打实打赏阿松大撒大苏打啊实打实的阿松大撒大苏打是阿三大苏打撒旦撒
										的撒大苏打阿斯顿撒的撒大苏打啊实打实大苏打市多啊实打实打赏阿松大撒大苏打啊实打实的阿松大撒大苏打是阿三大苏打撒旦撒
										的撒大苏打阿斯顿撒的撒大苏打啊实打实大苏打市多
									</p>
									<p
										style="
											padding-top: 10px;

											color: #0b0b0b;

											font-weight: 600;
										"
									>
										撒大大大大大大大大大阿三顶顶顶顶顶顶顶顶顶顶阿三水水水水水水水水水水水水阿三顶顶顶顶顶顶顶顶顶顶撒顶顶顶
									</p>
								</div>
							</div>
						</el-tab-pane>
						<el-tab-pane label="内容简介">配置管理</el-tab-pane>
						<el-tab-pane label="目录">角色管理</el-tab-pane>
					</el-tabs>
				</div>
			</div>
		</div>
		<Bottom />
	</div>
</template>

<script>
import Search from '../../components/Search'
import Bottom from '../../components/Bottom'
export default {
	components: {
		Search,
		Bottom
	},
	data() {
		return {
			activeName: 'first'
		}
	},
	methods: {
		handleClick(tab, event) {
			console.log(tab, event)
		}
	}
}
</script>

<style lang="scss" scoped>
//tab字体样式
/deep/.el-tabs__nav {
	margin-top: 10px;
}

/deep/#tab-0 {
	color: #000;
	font-size: 18px;
	margin-left: 10px;
	background: #f3e3e3;
}

/deep/#tab-1 {
	color: #000;
	font-size: 18px;
	margin-left: 10px;
	background: #f3e3e3;
}

/deep/.is-active {
	background: #fff !important;
}

/deep/#tab-2 {
	color: #000;
	font-size: 18px;
	margin-left: 10px;
	background: #f3e3e3;
}

.chuban {
	color: #950006ff;
	font-size: 16px;
	font-weight: 600;
}

.dinwgei_img_3 {
	width: 41px;
	height: 40px;
	right: -40px;
	top: 0;
	position: absolute;
}

.dinwgei_img_4 {
	width: 41px;
	height: 40px;
	right: -40px;
	top: 45px;
	position: absolute;
}

/deep/.el-tabs__nav-wrap {
	background: #950006ff;
	color: #fff;
}

.el-tabs_active-bar {
	background: none;
}

.el-tabs--border-card {
	width: 1102px;
	height: 48px;
	margin: 43px 67px;
}

.particulars_tab {
	width: 1142px;
	height: 564px;
	background: #fff;
	margin-top: -18px;
	margin-left: -20px;

	.particulars_tab_top {
		width: 817px;
		height: 411px;

		padding: 36px 31px;
	}
}

.particulars {
	width: 100%;
	height: 100%;

	.particulars_search {
		width: 1310px;
		height: 146px;
		background: #ccc;
		margin: 0 auto;
	}

	.particulars_img {
		width: 100%;
		height: 105px;
	}

	.particulars_home {
		width: 100%;
		height: 100%;
		position: relative;

		.particulars_box_4 {
			width: 1310px;
			height: 1375px;
			margin: 0 auto;
			background: #f2f2f2;
		}

		.particulars_new_top {
			width: 1310px;
			height: 79px;
			padding-top: 37px;
		}

		.particulars_p_1 {
			width: 1150px;
			height: 36px;
			font-size: 16px;
			color: #0b0b0b;
			border-bottom: 2px solid #950006ff;
			margin-left: 62px;
			// line-height: 79px;
			top: 100px;
		}

		.particulars_mian {
			width: 100%;
			height: 610px;
			position: relative;
		}

		.particulars_mian_left {
			width: 477px;
			height: 564px;
			border: 1px solid #898989ff;
			margin-left: 67px;
			margin-top: 39px;
			float: left;
            background: #ffffff;
			.particulars_img_1 {
				width: 341px;
				height: 429px;
				border: 1px dashed #898989ff;
				margin-left: 75px;
				margin-top: -35px;
			}

			.particulars_img_2 {
				width: 235px;
				height: 21px;
				margin: 27px 21px;
			}
		}

		.particulars_mian_right {
			width: 638px;
			height: 566px;
			border: 1px solid #898989ff;
			margin-top: 39px;
			margin-left: 27px;
			float: left;
            background: #ffffff;
			.particulars_mian_right_one {
				width: 509px;
				height: 232px;
				margin: 51px 34px;
			}

			.particulars_p_2 {
				width: 556px;
				height: 59px;
				font-size: 24px;
				color: #0b0b0bff;
				margin: 34px 35px;
			}

			.particulars_p_3 {
				font-size: 16px;
				color: #0b0b0bff;
			}

			.particulars_p_4 {
				font-size: 16px;
				color: #0b0b0bff;
				padding-top: 10px;
			}

			.particulars_p_5 {
				font-size: 16px;
				color: #0b0b0bff;
				padding-top: 10px;
			}

			.particulars_p_6 {
				font-size: 16px;
				color: #0b0b0bff;
				padding-top: 10px;
			}

			.particulars_mian_span_1 {
				font-size: 24px;
				color: #0b0b0bff;
				margin-left: 34px;
				margin-top: 20px;
				float: left;
			}

			.particulars_mian_span_2 {
				img {
					width: 30px;
					height: 30px;
				}

				display: flex;
				align-items: center;
				width: 136px;
				height: 38px;
				border-radius: 25px;
				color: #fff;
				background: #950006ff;
				margin-left: 66px;
				float: left;
				margin-top: 20px;
				font-size: 16px;
				line-height: 38px;
				padding-left: 20px;
			}
		}
	}
}
</style>
